import { ECharts } from "echarts";
import { ChartConfig } from "./models/define";
// import imgUrl from "../assets/images/fullscreen.png";

let templateLeftHtml = `
<div class="tool-box-left-container">
    <span class='icon-button icon-button-fullscreen' title='fullscreen'></span>
</div>`

let templateRightHtml = `
<div class="tool-box-right-container">
    <span class='select-item' mode='day'>Day</span>
    <span class='select-item' mode='week'>Week</span>
    <span class='select-item' mode='month'>Month</span>
</div>
`;
export class ToolBoxUnit {
    private $toolboxLeft: JQuery<HTMLElement> = $('');
    private $toolboxRight: JQuery<HTMLElement> = $('');

    public dayClickEvents: (() => void)[] = []
    public weekClickEvents: (() => void)[] = []
    public monthClickEvents: (() => void)[] = []
    constructor(private myChart: ECharts, private $canvasContainer: JQuery<HTMLElement>, private config: ChartConfig, private dom: HTMLDivElement) {
        if (config.showTimeViewMode) {
            this.$toolboxRight = $(templateRightHtml);
            this.$canvasContainer.append(this.$toolboxRight);
        }

        if (config.showImageToolbox) {
            this.$toolboxLeft = $(templateLeftHtml);
            this.$canvasContainer.append(this.$toolboxLeft);
        }

        this.init();
    }

    private init(): void {
        this.$toolboxRight.on('click', '.select-item', e => {
            let $cur = $(e.target);

            let curModel = $cur.attr('mode');
            this.selectMode(curModel as any);
        });

        this.$toolboxLeft.on('click', '.icon-button-fullscreen', () => {
            $(this.dom).toggleClass('full-screen');
            // this.myChart.resize();
            return false;
        });
    }

    public selectMode(mode: 'day' | 'week' | 'month') {
        let $cur = this.$toolboxRight.find(`[mode="${mode}"]`);

        $cur.addClass('selected').siblings().removeClass('selected');
        switch (mode) {
            case 'day':
                this.dayClickEvents.forEach(item => item());
                break;
            case 'week':
                this.weekClickEvents.forEach(item => item());
                break;
            case 'month':
                this.monthClickEvents.forEach(item => item());
                break;
            default:
                break;
        }
    }
}